<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>

    <script>
        window.onload = function() {
			// 设置页面中的div和p的边框为1px solid red
			// 1.设置div的样式
			
			// 1.1 获取div们
			var divs = document.getElementsByTagName("div");
			// 1.2 遍历获取到的div们
			// little tip: itar 敲tab就可以出现for循环
			for(var i = 0; i < divs.length;i++) {
				var div = divs[i];
				// 1.3在循环中给div设置样式
				div.style.border = "1px solid red";
				// div.style.float = "left";
			}
			
			// 2.设置p的样式
			var ps = document.getElementsByTagName("p");
			for(var j = 0; j < ps.length; j++) {
				ps[j].style.border = "1px solid red";
			}
			
			// 编写代码的时候的原则: DRY
			// Dont repeat yourself
			
		}

    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>

<p>我是第1个p元素</p>
<p>我是第2个p元素</p>
<p>我是第3个p元素</p>
</body>
</html>